import React, {useState} from 'react'

export default function UseStateFn() {
  // useState是一个函数，有两个返回值
  // 方括号是数组结构，声明了age, setAge两个变量
  // age是数据的状态,初始值为18
  // setAge是修改age的函数,接受的变量是age最新的值
  // 如果数据较多,不必反复使用useState声明变量,可以声明一个对象或者数组格式的变量,存放多条数据
  const [age, setAge] = useState(18);
  const [food, setFood] = useState('rice');
  const [list, setList] = useState([{name: 'a'}]);
  // 给数组对象添加内容
  const addList = (name) => {
    setList(list.concat([{name}]));
  }
  return (
    <div>
      <div>我是函数组件</div>
      <p>{age}</p>
      <p>{food}</p>
      <button onClick={()=>setAge(69)}>+1</button>
      <button onClick={()=>setFood('hotpot')}>吃火鍋</button>
      {
        list.map((item,index) => {
          return (
            <div key={index}>{item.name}</div>
          )
        })
      }
      <button onClick={()=>addList('b')}>add</button>
    </div>
  )
}
